.button {
  @apply inline-flex items-center justify-center;
  @apply border border-primary-500-30;
  @apply px-4 rounded-sm;
  @apply text-primary-400 font-semibold uppercase;
  @apply outline-none #{!important};
  height: 40px;
  transition: all 0.2s ease-in-out;

  &:hover {
    @apply bg-primary-500-20;
  }

  &:active {
    @apply bg-primary-500-30;
  }

  &.button--xs {
    @apply px-2 text-xs;
    height: 21px;
  }

  &.button--sm {
    @apply px-2 text-sm;
    height: 31px;
  }

  &.button--xl {
    @apply px-6 text-xl;
    height: 51px;
  }

  &.button--active,
  &.nuxt-link-exact-active {
    @apply text-white bg-primary-500;
  }

  &.button--danger {
    @apply text-danger-400 border-danger-500-30;

    &:hover {
      @apply bg-danger-500-20;
    }

    &:active {
      @apply bg-danger-500-30;
    }
  }

  &.button--success {
    @apply text-success-400 border-success-500-30;

    &:hover {
      @apply bg-success-500-20;
    }

    &:active {
      @apply bg-success-500-30;
    }
  }

  &.button--info {
    @apply text-blue-400 border-blue-500-30;

    &:hover {
      @apply bg-blue-500-20;
    }

    &:active {
      @apply bg-blue-500-30;
    }
  }

  .icon {
    @apply mr-2;
  }
}

.buttons {
  @apply flex items-center flex-wrap justify-start;

  &.is-center {
    @apply justify-center;
  }

  &.is-right {
    @apply justify-end;
  }

  &.is-group {
    .button {
      &:not(:last-child) {
        @apply rounded-r-none;
      }

      &:not(:first-child) {
        @apply rounded-l-none border-l-0;
      }
    }
  }
}
